{% extends '_base_only_content.html' %}
{% load static %}
{% load i18n %}
{% load bootstrap3 %}
{% block custom_head_css_js %}
    <style>
        .margin-bottom {
            margin-bottom: 15px;
        }
        .input-style {
            width: 100%;
            display: inline-block;
        }

        .challenge-required .input-style {
            width: calc(100% - 120px);
            display: inline-block;
        }

        .btn-challenge {
            width: 110px !important;
            height: 100%;
            vertical-align: top;
        }
    </style>
{% endblock %}
{% block html_title %}{% trans 'Forgot password' %}{% endblock %}
{% block title %} {% trans 'Forgot password' %}?{% endblock %}

{% block content %}
    <p id="validate-email-tip" class="validate-field">
        {% trans 'Input your email account, that will send a email to your' %}
    </p>
    <p id="validate-sms-tip" class="validate-field">
        {% trans 'Enter your mobile number and a verification code will be sent to your phone' %}
    </p>

    {% if 'code' in form.errors %}
        <p class="red-fonts">{{ form.code.errors.as_text }}</p>
    {% endif %}

    <div class="row">
        <div class="col-sm-12">
            <select id="validate-backend-select" name="validate-backend_type"
                    class="form-control select-con margin-bottom" onchange="selectChange(this.value)">
                {% for backend in validate_backends %}
                    <option value="{{ backend.value }}" {% if not backend.is_active %} disabled {% endif %}>
                        {{ backend.name }}
                    </option>
                {% endfor %}
            </select>
            <form role="form" class="form-horizontal" action="" method="post">
                {% csrf_token %}
                {% bootstrap_field form.form_type layout="horizontal" %}
                <div id="validate-email" class="validate-field margin-bottom">
                    <input type="email" id="email" name="email" class="form-control input-style"
                           placeholder="{% trans 'Email account' %}" value="{{ email }}">
                </div>
                <div id="validate-sms" class="validate-field margin-bottom">
                    <input type="tel" id="sms" name="sms" class="form-control input-style"
                           placeholder="{% trans 'Mobile number' %}" value="{{ sms }}">
                    <small style="color: #999; margin-left: 5px">{{ form.sms.help_text }}</small>
                </div>
                <div class="margin-bottom challenge-required">
                    <input type="text" id="code" name="code" class="form-control input-style"
                           placeholder="{% trans 'Verify code' %}">
                    <button class="btn btn-primary full-width btn-challenge"
                            type='button' onclick="sendChallengeCode(this)">
                        {% trans 'Send' %}
                    </button>
                </div>
                <div class="margin-bottom">
                    <button type="submit" class="btn btn-primary block full-width m-b">{% trans 'Submit' %}</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        $(function (){
            const validateSelectRef = $('#validate-backend-select')
            const formType = $('input[name="form_type"]').val()
            validateSelectRef.val(formType)
            if (formType !== null) {
                selectChange(formType);
            }
        })
        function getQueryString(name) {
            const reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            const r = window.location.search.substr(1).match(reg);
            if(r !== null)
                return unescape(r[2])
            return null
        }
        function selectChange(name) {
            $('.validate-field').hide()
            $('#validate-' + name).show()
            $('#validate-' + name + '-tip').show()
            $('input[name="form_type"]').attr('value', name)
        }
        function sendChallengeCode(currentBtn) {
            let time = 60;
            const token = getQueryString('token')
            const url = "{% url 'api-auth:reset-password-code' %}" + "?token=" + token;

            const formType = $('input[name="form_type"]').val()
            const email = $('#email').val()
            const sms = $('#sms').val()
            const errMsg = "{% trans 'The {} cannot be empty' %}"

            if (formType === 'sms') {
                if (sms === "") {
                    toastr.error(errMsg.replace('{}', "{% trans 'SMS' %}"))
                    return
                }
            } else {
                if (email === "") {
                    toastr.error(errMsg.replace('{}', "{% trans 'Email' %}"))
                    return
                }
            }

            const data = {
                form_type: formType, email: email, sms: sms,
            }
            function onSuccess() {
                const originBtnText = currentBtn.innerHTML;
                currentBtn.disabled = true

                const interval = setInterval(function () {
                    currentBtn.innerHTML = `{% trans 'Wait: ' %} ${time}`;
                    time -= 1

                    if (time === 0) {
                        currentBtn.innerHTML = originBtnText
                        currentBtn.disabled = false
                        clearInterval(interval)
                    }
                }, 1000)
            }

            requestApi({
                url: url,
                method: "POST",
                body: JSON.stringify(data),
                success: onSuccess,
                success_message: "{% trans 'The verification code has been sent' %}",
                flash_message: true
            })
        }
    </script>
{% endblock %}

